import { Navigator, Text } from "@tarojs/components";

import Money from "@/components/app/Money";
import ByCol from "@/components/ui/ByCol";
import ByIcon from "@/components/ui/ByIcon";
import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";

import useFetch from "@/hooks/useFetch";
import ApiFinance from "@/api/finance";

// 风险金和质保金
export default ({ intentCustomerId }: { intentCustomerId: number }) => {
  const { data } = useFetch<{
    riskAmount: number;
    qualityAmount: number;
  }>(ApiFinance.quantityGoldBill, {
    defaultParams: [{ intentCustomerId }],
  });

  return (
    data && (
      <ByRow className="my-3">
        <ByCol span={4}>
          <Text className="text-xs">风险金：</Text>
          <Money value={data.riskAmount} />
        </ByCol>
        <ByCol span={4}>
          <Text className="text-xs">质保金：</Text>
          <Money value={data.qualityAmount} />
        </ByCol>
        <ByCol span={4} className="text-right">
          <Navigator
            url={`/packageProject/pages/retentionMoney/index?intentCustomerId=${intentCustomerId}`}
            hoverClass="none"
          >
            <ByText type="primary" className="text-xs">
              全部项目
              <ByIcon name="ArrowRight" size={20} />
            </ByText>
          </Navigator>
        </ByCol>
      </ByRow>
    )
  );
};
